import React, { Component } from 'react';
import {
  Card,
  Button,
  Row,
  Col,
  Icon,
  Tabs,
  Table,
  Radio,
  DatePicker,
  Tooltip,
  Menu,
  Dropdown,
  Input,
  Divider,
  Popconfirm,
} from 'antd';
import { connect } from 'dva';
const { MonthPicker, RangePicker } = DatePicker;
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import numeral from 'numeral';
import { formatMessage, FormattedMessage } from 'umi/locale';
import moment from 'moment';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const { Search, TextArea } = Input;

import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  Field,
  Bar,
  Pie,
  TimelineChart,
} from '@/components/Charts';

const { Meta } = Card;

import Trend from '@/components/Trend';
import styles from './Category.less';

import { getValueWithLocalStorage } from '@/utils/authority';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

const namespace = 'news';
const userInfo = getValueWithLocalStorage('userinfo');
import router from 'umi/router';
import config from '../../../config/web.config'

const mapStateToProps = state => {
  const categoryList = state[namespace].categoryList;
  const total = state[namespace].total;
  const isLoading = state[namespace].isLoading;

  return {
    categoryList,
    total,
    isLoading,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getNewsCategorys: (_key, _page, _pagesize) => {
      const action = {
        type: `${namespace}/getNewsCategorys`,
        payload: {
          key: _key,
          page: _page,
          pagesize: _pagesize,
        },
      };
      dispatch(action);
    },


    delNewsCategorys: (_id) => {
      const action = {
        type: `${namespace}/delCategory`,
        payload: {
          id: _id,
        },
      };
      dispatch(action);
    },

  };
};

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class Category extends Component {
  constructor(props) {
    super(props);
    this.state = {
      state: '-1', //维修状态:0维修中 1待结账 2已完成 3已取消
      page: '0',
      pagesize: '20',
      key: '',
    };
  }

  componentDidMount() {
    config.loadlCNZZ()
    this.reloadData();
  }

  reloadData = () => {
    this.props.getNewsCategorys(
      this.state.key,
      this.state.page,
      this.state.pagesize,
    );
  };


  render() {
    const columns = [
      {
        title: '分类名',
        dataIndex: 'name',
        key: 'name',
        width: 100
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: 150,
        render: (text, record) => (
          <Route>
            <span>
              <Link to={{ pathname: '/news/addCategory', query: { ...record } }}>编辑</Link>
              <Divider type="vertical" />
              <Popconfirm
                title="确认删除此分类?"
                onConfirm={() => {
                  that.props.delNewsCategorys(
                    record._id);
                }}
                okText="确认"
                cancelText="取消"
              >
                <a href="#" className={styles.delBtnStyle}>
                  删除
                </a>
              </Popconfirm>
            </span>
          </Route>
        ),
      },
    ];

    const dateFormat = 'YYYY-MM-DD';

    var that = this;

    const extraContent = (
      <div className={styles.extraContent}>


        <Search className={styles.extraContentSearch}
                placeholder="输入分类名"
                enterButton
                all
                onSearch={(v,e)=>{
                  that.setState({key:v},()=>{
                    that.reloadData()
                  })
                }} />
        <Link className={styles.addBtn} to={{ pathname: '/news/addCategory'}}>新增分类</Link>
      </div>
    );

    return (
      <Card
        bordered={false}
        title={'分类列表'}
        style={{ marginTop: 24 }}
        bodyStyle={{ padding: '0 0px 0px 0px' }}
        extra={extraContent}
      >


        <Table
          columns={columns}
          // rowSelection={{
          //   onSelect: (record, selected, selectedRows, nativeEvent) => {
          //     alert(record + selected + selectedRows + nativeEvent);
          //   },
          // }}
          pagination={{
            current: Number(this.state.page) + 1,
            loading: this.props.isLoading,
            pageSize: Number(this.state.pagesize),
            showSizeChanger: true,
            showQuickJumper: true,
            pageSizeOptions: ['1', '5', '10', '20', '50'],
            total: this.props.total,
            onShowSizeChange: (current, size) => {
              that.setState({ pagesize: size, page: 0 }, () => {
                that.reloadData();
              });
            },
            onChange: (page, pageSize) => {
              that.setState({ page: page - 1 }, () => {
                that.reloadData();
              });
            },
            showTotal: total => `总计 ${total} 条`,
          }}
          dataSource={this.props.categoryList}
        />
      </Card>
    );
  }
}
